import React, { Component } from 'react';
import { HashRouter, Match, Miss, Link } from 'react-router';

import { Row, Col, Icon } from 'antd';

const GenRouter = (routes) => {
    const {links, components} = routes;
    return (
        <HashRouter>
            <div>
                <header>
                    <Row gutter={0}>
                        <Col lg={4} md={6} sm={24} xs={24}>
                            <Link to="/" id="logo"><Icon type="rocket" style={{fontSize: '24px'}} />&nbsp;查快递</Link>
                        </Col>
                        <Col lg={20} md={18} sm={0} xs={0}>
                            <nav className="index-nav">
                                <ul>
                                    {
                                        links.map((link, index) => (
                                            <li key={index.toString()}>
                                                <Link to={link.path}>{link.pathname}</Link>
                                            </li>
                                        ))
                                    }
                                </ul>
                            </nav>
                        </Col>
                    </Row>
                </header>
                <section>
                    {
                        components.map((component, index) => (
                            <Match
                                key={index.toString()}
                                exactly={component.exactly}
                                pattern={component.path}
                                component={component.component}
                                />
                        ))
                    }
                </section>
                <footer className="">
                    <p>learn <a href="https://facebook.github.io/react/" target="_blank">React</a> + <a href="https://react-router.now.sh/" target="_blank">React-Router:V4</a> + <a href="http://es6.ruanyifeng.com/" target="_blank">ES6</a> + <a href="http://webpack.github.io/" target="_blank">Webpack</a></p>
                    <p>by Noah Sun</p>
                </footer>
            </div>
        </HashRouter>
    )
}

class Navigator extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                {GenRouter(this.props)}
            </div>
        );
    }
}

export default Navigator;